<template>
    <view>
        <view class="top-bg"></view>
        <view class="search-header">
            <view class="search-bar">
                <input type="text" v-model="searchKey" placeholder="搜索书名/口令码" />
                <image class="search-icon" @click="clearValue"
                    src="https://img.wlcod.com/novel/img/search-del-icon.webp" />
                <view class="search-box" @click="onSearch">
                    <view class="search-btn">搜索</view>
                </view>
            </view>
        </view>
        <view class="top-bg"></view>
        <div class="component-history">
            <view class="history-search-box" v-if="dataList.length === 0 && localSearchKey.length !== 0">
                <view class="history-title">
                    <view class="h-1">历史搜索</view>
                    <image class="h-2" @click="clearSearchHistory"
                        src="https://img.wlcod.com/novel/img/history-del-icon.png" />
                </view>
                <view class="history-search-key">
                    <view class="h-3" v-for="item in localSearchKey" :key="item" @click="searchHistory(item)">{{ item }}
                    </view>
                </view>
            </view>
            <scroll-view :scroll-y="true" :scroll-with-animation="true" @scrolltolower="scrolltolower"
                style="height: 1260rpx">
                <!-- 空列表状态 -->
                <view class="empty-data" v-if="!dataList.length">
                    <image class="empty-img" :src="`${imgBaseUrl}search-empty-status.webp`" />
                    <view class="gostore-btn" v-if="listStatus === 'default' && !searchKey">请输入漫画名称或关键词进行搜索</view>
                    <view class="gostore-btn" v-if="listStatus === 'data' && !dataList.length">没有找到想要的结果</view>
                </view>

                <view v-if="dataList.length" class="list-box">
                    <view v-for="item in dataList" :key="item.id" class="list-item" @click="enter(item)">
                        <view class="histpry-book-img-box">
                            <image class="histpry-book-img" :src="item.coverpic" />
                        </view>
                        <view class="book-right">
                            <view class="right-1">{{ item.title }}</view>
                            <view class="right-3">{{ item.desc }}</view>
                        </view>
                    </view>
                    <view class="no-more" v-if="isEnd">没有更多了~</view>
                </view>
            </scroll-view>
        </div>
    </view>
</template>

<script>
import { getAnimeList, getHistoryChaps } from '@/api'
export default {
    props: {},
    data () {
        return {
            dataList: [],
            page: 1,
            page_size: 999,
            searchKey: '',
            isEnd: false,
            listStatus: 'default',
            localSearchKey: [],
        };
    },
    watch: {
        searchKey (n) {
            if (n) {
                this.listStatus = 'data';
            } else {
                this.listStatus = 'default';
            }
        },
    },
    methods: {
        async getList () {
            uni.showLoading({
                title: '加载中',
                icon: 'none',
            });
            const { data } = await getAnimeList({ page_size: 20, page: this.page, keyword: this.searchKey });
            this.dataList = [...this.dataList, ...data.data];
            console.log(11, this.dataList)

            this.searchKey && this.localSearchKey.push(this.searchKey);
            this.localSearchKey = [...new Set(this.localSearchKey)];
            uni.setStorageSync('localSearchKey', this.localSearchKey);
            if (!data.data.length) this.isEnd = true;
            uni.hideLoading();
        },
        onSearch () {
            this.getList();
        },
        searchHistory (item) {
            this.searchKey = item;
            this.getList();
        },
        clearSearchHistory () {
            this.localSearchKey = [];
            uni.setStorageSync('localSearchKey', []);
        },
        scrolltolower () {
            this.page++;
            this.getList();
        },
        async enter (item) {
            if (this.isEdit) return;
            // uni.navigateTo({ url: `/pages/book-detail/index?&id=${item.id}` })
            const { data } = await getHistoryChaps(item.id)
            uni.navigateTo({ url: `/pages/readingPage/index?&id=${item?.id}&chapter=${data.history_chapter}` });
        },
        clearValue () {
            this.searchKey = '';
        },
    },
    created () {
        this.localSearchKey = uni.getStorageSync('localSearchKey') || [];
        uni.setNavigationBarTitle({ title: '搜索' });
    },
};
</script>

<style lang="less" scoped>
.top-bg {
    width: 100vw;
    height: 16rpx;
    background: #f3f5f8;
}

.search-header {
    width: 100vw;
    height: 72rpx;
    background: #f3f5f8;

    .search-bar {
        background: #ffffff;
        border-radius: 88rpx 88rpx 88rpx 88rpx;
        margin: 0 auto 0;
        width: 686rpx;
        height: 72rpx;
        box-sizing: border-box;
        color: #333333;
        font-size: 26rpx;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;

        .search-icon {
            width: 24rpx;
            height: 24rpx;
            padding: 20rpx;
        }

        input {
            margin-left: 16rpx;
            width: 100%;
            border: none;
            outline: none;
            text-indent: 10rpx;
        }

        .search-box {
            width: 120rpx;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .search-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            border-left: 1rpx solid #d5d5d5;
            width: 120rpx;
            height: 24rpx;
            font-size: 26rpx;
            color: #333333;
            text-align: center;
        }
    }
}

.component-history {
    height: calc(100vh - 32rpx - 20rpx - 72rpx);
    width: 100vw;
    /* #ifdef MP-TOUTIAO */
    padding: 20rpx 32rpx 0;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    padding: 182rpx 32rpx 0;
    /* #endif */
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;

    .flex-c {
        display: flex;
        align-items: center;
        justify-self: center;
    }

    .history-search-box {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;

        .history-title {
            height: 48rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .h-1 {
                font-size: 32rpx;
                color: #333333;
                margin-left: 32rpx;
            }

            .h-2 {
                height: 40rpx;
                width: 40rpx;
            }
        }

        .history-search-key {
            margin-top: 24rpx;
            width: 100%;
            height: auto;
            display: flex;
            flex-flow: row wrap;

            .h-3 {
                margin-top: 20rpx;
                padding: 0 24rpx;
                height: 48rpx;
                margin-right: 20rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #f3f5f8;
                border-radius: 24rpx 24rpx 24rpx 24rpx;
                font-size: 26rpx;
                color: #333333;
            }
        }
    }

    .empty-data {
        margin-top: 200rpx;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column wrap;

        .empty-img {
            width: 350rpx;
            height: 350rpx;
        }

        .gostore-btn {
            width: 470rpx;
            height: 88rpx;
            font-size: 30rpx;
            color: #727272;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .base-text-font {
        font-size: 22rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .list-box {
        height: 100%;
        position: relative;

        .list-item {
            margin-top: 28rpx;
            width: 100%;
            height: 200rpx;
            overflow: hidden;
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: center;

            .histpry-book-img-box {
                position: relative;

                .histpry-book-img {
                    width: 126rpx;
                    height: 168rpx;
                    border-radius: 12rpx 12rpx 12rpx 12rpx;
                }
            }

            .book-right {
                margin-left: 30rpx;

                .right-1 {
                    font-size: 28rpx;
                    color: #000000;
                    width: 474rpx;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }

                .right-3 {
                    width: 474rpx;
                    height: 96rpx;
                    margin-top: 20rpx;
                    font-size: 22rpx;
                    color: #727272;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        .no-more {
            width: 100%;
            height: 48rpx;
            margin-top: 96rpx;
            padding-bottom: 120rpx;
            font-size: 28rpx;
            color: #909090;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>
